<template>
  <view class="bg-white c-br c-pd">
    <view class="info flex items-center">
      <view class=""><van-image round width="60px" height="60px" fit="cover" :src="EEquipLogo[equipInfo.equipType]" /></view>
      <view class="px-2 flex-1 overflow-hidden">
        <view class="mb-4 flex items-center">
          <view class="c-text-14 pr-2 c-text-ellipsis w-fit">昵称：{{ equipNickName || '未设置' }}</view>
          <i class="i-ri:edit-2-line text-14px c-text-color-grey" @click="showSetEquipPopup('nickName', equipNickName)"></i>
        </view>
        <view>
          <text>状态：</text>
          <van-tag v-if="equipInfo.equipState === 2" type="success">在线</van-tag>
          <van-tag v-else color="#9C9C9E">离线</van-tag>
          |
          <van-tag v-if="equipInfo.errorState === 1" type="danger">报警</van-tag>
          <van-tag v-else type="success">正常</van-tag>
          <text class="ml-6" v-if="equipInfo.powerLevel">电量：{{ EEquipPower[equipInfo.powerLevel] }}</text>
        </view>
      </view>
    </view>
    <view class="mt-[12px]">
      <i class="i-material-symbols-light:location-on-outline-rounded text-4"></i>
      <text class="c-text-14 vertical-mid">{{ siteInfo?.createDate || '' }}{{ siteInfo?.address }}</text>
    </view>
    <view>
      <map :scale="15" :markers="markers" :longitude="siteInfo?.longitude" :latitude="siteInfo?.latitude" class="w-full"></map>
    </view>
  </view>

  <SetEquipInfoPopup :equip-id="equipInfo.equipId" :type="setInfo.type" :content="setInfo.content" @change-value="handleChangeValue" />
</template>

<script setup lang="ts">
import { EEquipLogo, EEquipPower } from '@/enum/equip';
import EquipRequest from '@/request/equipRequest';
import SetEquipInfoPopup from '@/subcontract/equipment/equipDetail/component/SetEquipInfoPopup.vue';
import { useControllerStore } from '@/store';

interface ISetInfo {
  type: string;
  content: any;
}

const equipNickName = ref('');
const props = defineProps<{ equipInfo: IEquipDetailRes }>();
const setInfo = reactive<ISetInfo>({ type: '', content: '' });
const siteInfo = ref<IGetSiteNow>();
const markers = ref<{ id: number; longitude: string; latitude: string; width: number; height: number }[]>([
  {
    id: 0,
    longitude: '0',
    latitude: '0',
    width: 26,
    height: 30,
  },
]);

onMounted(() => {
  getSiteNow();
  equipNickName.value = props.equipInfo.equipNickName;
});

const showSetEquipPopup = (type: string, content: any) => {
  setInfo.type = type;
  setInfo.content = content;
  useControllerStore().$patch({ setEquipInfoPopup: true });
};

const handleChangeValue = (payload: { type: string; content: any }) => {
  switch (payload.type) {
    case 'nickName':
      equipNickName.value = payload.content;
      break;
  }
};

const getSiteNow = () => {
  EquipRequest.GetSiteNow({ equipId: props.equipInfo.equipId }).then((res) => {
    if (res.data) {
      siteInfo.value = res.data;
      markers.value[0].longitude = siteInfo.value!.longitude === null ? '0' : siteInfo.value!.longitude;
      markers.value[0].latitude = siteInfo.value!.latitude === null ? '0' : siteInfo.value!.latitude;
    }
  });
};

const updateLocationData = () => {
  getSiteNow();
};

//任意组件触发头部组件的更新
provide('updateLocationData', updateLocationData);
</script>
